import { connect } from 'react-redux'
import Count from '../components/Count'
import { add, sub, addN, addAsync } from '../redux/actions'
// WithCount就是监听redux数据变化的父组件
// 1. connect第一次调用什么都不写,则Count组件通过props只能拿到一个dispatch方法,无法获取到redux数据
// 2. 如果Count组件需要获取redux中的数据,则需要在connect第一次调用的时候,传入一个函数.这个函数如下
// function mapStateToProps(state) {
//   // state是redux中所有数据，这个其实就是把Count需要的数据过滤出来，传递到Count的props上面
//   console.log(state)
//   return {
//     count: state.count,
//   }
// }
// 3. 如果不想再Count组件看到调用dispatch的代码,可以利用下面的函数,将调用dispatch的代码封装成一个新的函数,然后通过props传递给Count
function mapDispatchToProps(dispatch) {
  return {
    xxx: function () {
      dispatch(add())
    },

    yyy: function () {
      dispatch(sub())
    },
    zzz: function (n) {
      dispatch(addN(n))
    },
    addAsync: function () {
      dispatch(addAsync())
    },
  }
}
// WithCount被称为容器组件
// 注意: 如果connect第一次调用的第二个参数,传入对象.则connect函数会自动帮我们创建mapDispatchToProps
// const WithCount = connect(mapStateToProps, { xxx: add, yyy: sub })(Count)
const WithCount = connect((state) => ({ count: state.count }), {
  add,
  sub,
  zzz: addN,
  addAsync,
})(Count)
export default WithCount
